<template>
  <div>
    <el-row>
      <!-- 头部1，放namespace选择框, 刷新按钮 -->
      <el-col :span="24">
        <el-card class="deploy-head-card" shadow="never" :body-style="{padding:'10px'}">
          <el-row>
            <!-- 集群切换下拉选择框 -->

            <el-col :span=8>
              <span style="font-size: 14px;">集群选择:</span>
              <!--              @change选择下拉框时会调用npk8slis方法-->
              <el-select
                  size="small"
                  v-model="k8sValue"
                  filterable
                  placeholder="请选择">
                <el-option
                    v-for="(data, index) in k8sList"
                    :key="index.k8s_name"
                    :label="data.k8s_name"
                    :value="data.k8s_name">
                </el-option>
              </el-select>
            </el-col>

          </el-row>
        </el-card>
      </el-col>
      <!-- 头部2，创建按钮 及搜索框 -->
      <el-col :span="24">
        <el-card class="deploy-head-card" shadow="never" :body-style="{padding:'10px'}">
          <!-- float属性，会将多个同级标签放在同一行 -->
          <div style="float: left;margin-right:10px;">
            <el-button size="small" type="primary" icon="Edit" @click="createk8sDrawer = true">导入集群</el-button>
          </div>
          <div>
            <el-input class="deploy-head-search" size="small" clearable placeholder="请输入" v-model='searchValue'></el-input>
            <el-button size="small" type="primary" plain icon="Edit" @click="getk8slist()">刷新</el-button>
          </div>
        </el-card>
      </el-col>
      <!-- 数据表格 -->
      <el-col :span="24">
        <el-card class="deploy-body-card" shadow="never" :body-style="{padding:'10px'}">
          <el-table
              style="font-size:12px;"
              :data="k8sList"
              v-loading="appLoading">
            <!-- v-loading用于加载时的laoding动画 -->
            <!-- 表格内容 -->
            <!-- 最左侧留出20培训的宽度 -->
            <el-table-column width="20"></el-table-column>
            <!-- deployment名字 -->

            <el-table-column label="集群名称" prop="metadata.name">
              <!-- 插槽，scope.row获取当前行的数据 -->
              <template v-slot="scope">
                <a class="deploy-body-deployname">{{ scope.row.k8s_name }}</a>
              </template>
            </el-table-column>
            <!-- 标签 -->


            <el-table-column label="集群IP地址">
              <template v-slot="scope">
                <a class="deploy-body-deployname">{{ scope.row.k8sip }}</a>
              </template>
            </el-table-column>
            <!-- 创建时间 -->
<!--            <el-table-column label="创建时间">-->
<!--              <template v-slot="scope">-->
<!--                <a class="deploy-body-deployname">{{ scope.row }}</a>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <!-- 集群健康状态 -->
            <el-table-column label="集群健康状态">
              <template v-slot="scope">
                <a class="deploy-body-deployname">{{ scope.row.status }}</a>
              </template>
            </el-table-column>
            <!-- 操作列,放按钮 -->
                        <el-table-column label="操作" fixed="right" width="350">
                          <template v-slot="scope">
<!--                            <el-button size="small" icon="Edit" type="danger" plain @click="handleConfirm(scope, '编辑')">编辑</el-button>-->
                            <el-button size="small" icon="Edit" type="danger" plain @click="delk8slist(scope.row.k8s_name, '删除')">删除</el-button>
                          </template>
                        </el-table-column>
          </el-table>
          <el-pagination
              style="margin-top:10px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pagesizeList"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="deploymentTotal">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>

    <!-- 创建 -->
    <el-drawer
        v-model="createk8sDrawer"
        direction="rtl"
        :before-close="handleClose"
        size="50%"
        title="导入集群配置">

      <template #default>
        <!-- flex布局,居中 -->
        <el-row type="flex" justify="center">
          <el-col :span="20">
            <!-- ref绑定控件后，js中才能用this.$ref获取该控件 -->
            <!-- rules 定义form表单校验规则 -->
            <el-form ref="createDeployment" :rules="createk8s" :model="createk8s" label-width="100px" label-position="left" >
              <!-- prop用于rules中的校验规则的key -->
              <el-form-item class="deploy-create-form" label="集群名称" prop="name">
                <el-input v-model="createk8s.k8s_name"></el-input>
              </el-form-item>

<!--              <el-form-item class="deploy-create-form" label="集群IP" prop="name">-->
<!--                <el-input v-model="createk8s.colony"></el-input>-->
<!--              </el-form-item>-->

              <el-form-item class="deploy-create-form" label="k8sconfig" prop="customcommands">
                <el-input
                    v-model="createk8s.k8s_config_token"
                    :rows="30"
                    type="textarea"
                    placeholder="官方默认文件地址 /etc/kubernetes/admin.conf"
                />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </template>
      <!-- 插槽，抽屉footer -->
      <template #footer>
        <!-- 点击后赋值false，隐藏抽屉 -->
        <el-button @click="createk8sDrawer=false">取消</el-button>
        <el-button type="primary" @click=createk8slist()>立即创建</el-button>
      </template>
    </el-drawer>

  </div>
</template>

<script>
import common from '../../common/Config'
import httpClient from '@/request'

export default {
  data () {
    return {
      deploymentTotal: 0,
      //新增
      createcredentialDrawer: false,
      createcredentialData: {
        url: common.credentialAdd,
        name: '',
        user: '',
        password:'',
      },

      namespaceValue: 'default',
      namespaceListUrl: common.k8sNamespaceList,
      namespaceList: [],


      k8sValue: "",
      k8sListUrl: common.k8sList,
      k8sList:[],
      k8slistData: {
        url:common.k8sinit,
        params: {
          pool:'',
        }
      },

      pool:"",
      createk8sDrawer: false,
      searchValue: '',
      appLoading: false,
      //分页
      currentPage: 1,
      pagesize: 10,
      pagesizeList: [10, 20, 30],

      //创建k8s集群
      createk8sdata:"",
      createk8s: {
        url: common.Createk8s,
          k8s_name:"",
          k8sip:"",
          k8s_token:"",
          k8s_config_token:"",
          colony:""
      },

      Delk8spool: {
        url: common.Delk8spool,
        k8s_name:"",
      },
    }
  },

  methods: {
    handleClose() {
      this.createk8sDrawer = false
    },
    //页面大小发生变化时触发，赋值并重新获取列表
    handleSizeChange(size) {
      this.pagesize = size;
      this.getDeployments()
    },
    //页数发生变化时触发，复制并重新获取列表
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getk8slist()
    },


    createk8slist() {
      httpClient.post(this.createk8s.url, this.createk8s)
          .then(res => {
            this.createk8sdata = res.data
          })
          .catch(res => {
            this.$message.error({
              message: res.msg
            })
          })
          .finally(() => {
            this.getk8slist()
          })
      this.createk8sDrawer = false
    },


    delk8slist(k8s_name) {
      this.Delk8spool.k8s_name =  k8s_name
      httpClient.delete(this.Delk8spool.url, {data: this.Delk8spool})
          .then(res => {
            this.$message.success({
              message: res.msg
            })
          })
          .catch(res => {
            this.$message.error({
              message: res.msg
            })
          })
          .finally(() => {
            this.getk8slist()
          })
    },


    //读取集群池列表
    getk8slist() {
      httpClient.get(this.k8sListUrl)
          .then(res => {
            this.k8sList = res.data
            console.log(this.k8sList)
          })
          .catch(res => {
            this.$message.error({
              message: res.msg
            })
          })
    },
    k8sinit() {
      this.k8slistData.params.pool = this.k8sValue
      httpClient.get(this.k8slistData.url, {params: this.k8slistData.params})
          //处理结果
          .then(res => {
            this.$message.success({
              message: `确认已选择集群 ${this.k8slistData.params.pool}`
            })
            console.log("1")
          })
          .catch(res => {
            this.$message.error({
              message:  `初始化集群失败 ${this.k8slistData.params.pool} 请检查错误日志或联系管理员`
            })
          })
          .finally(() => {
            //console.log(this.k8sValue)
            this.appLoading = false
          })
      console.log(this.k8slistData.params.pool)


      localStorage.setItem('pool', this.k8sValue)
      localStorage.setItem('namespace', this.namespaceValue)
    }
  },
  //监听如果集群发生改变则刷新命名空间数据列表
  watch: {
    k8sValue(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.k8sinit();
      }
    }
  },
  // watch: {
  //   k8sValue: function(newVal, oldVal) {
  //     console.log({newVal, oldVal});

  //   }
  // },
  //mounted声明周期的操作，用于在页面加载完成之前获取某些数据
  mounted() {
    this.getk8slist()
    if (localStorage.getItem('namespace')) {
      this.namespaceValue = localStorage.getItem('namespace')
    }
    if (localStorage.getItem('pool')) {
      this.k8sValue = localStorage.getItem('pool')
    }
  },
}
</script>

<style scoped>
/* 卡片样式 */
.deploy-head-card, .deploy-body-card {
  border-radius: 1px;
  margin-bottom: 5px;
}
.el-button {
  border-radius: 2px;
}
.deploy-head-search {
  width: 160px;
  margin-right: 10px;
}
.deploy-body-deployname {
  font-weight:bold;
  color: rgb(33, 82, 155);
}

</style>
